<div class="title">
  <span>Idle While Overloaded</span>
  <button class="help-button"
          mat-icon-button
          (click)="showHelp()"
          matTooltip="Help"
          aria-label="Idle While Overloaded Help">
    <mat-icon>help_outline</mat-icon>
  </button>
</div>
<div *ngIf="utilizationMetrics | async as metrics">
  <div class="metric">
    <span class="metric-name">Wall Time: </span>
    <span>{{metrics.wallTime | formatTime}} </span>
    <span class="metric-percent">
      {{metrics.wallTime/viewportDuration.value | percent:'1.3-3'}}
    </span>
  </div>
  <div class="metric">
    <span class="metric-name">Per CPU Time: </span>
    <span>{{metrics.perCpuTime | formatTime}} </span>
    <span class="metric-percent">
      {{metrics.perCpuTime/viewportDuration.value | percent:'1.3-3'}}
    </span>
  </div>
  <div class="metric">
    <span class="metric-name">Per Thread Time: </span>
    <span>{{metrics.perThreadTime | formatTime}} </span>
    <span class="metric-percent">
      {{metrics.perThreadTime/viewportDuration.value | percent:'1.3-3'}}
    </span>
  </div>
  <div class="metric">
    <span class="metric-name">CPU Utilization Fraction: </span>
    <span class="metric-percent">
      {{metrics.cpuUtilizationFraction | percent:'1.2-2'}}
    </span>
  </div>
</div>
